<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery日期和时间插件DateTimePicker</title>

<!--日期样式-->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>

</head>
<body>

<div style="width:960px;margin:0 auto;">

	<h3>DateTimePicker</h3>
	<input type="text" value="2014/03/15 05:06" id="datetimepicker"/><br><br>
	
	
	<h3>Mask DateTimePicker</h3>
	<input type="text" value="" id="datetimepicker_mask"/><br><br>
	
	
	<h3>TimePicker</h3>
	<input type="text" id="datetimepicker1"/><br><br>
	
	
	<h3>DatePicker</h3>
	<input type="text" id="datetimepicker2"/><br><br>
	
	
	<h3>Inline DateTimePicker</h3>
	<input type="text" id="datetimepicker3"/><input type="button" onClick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
	
	
	<h3>Button Trigger</h3>
	<input type="text" value="2013/12/03 18:00" id="datetimepicker4"/><input id="open" type="button" value="open"/><input id="close" type="button" value="close"/><input id="reset" type="button" value="reset"/>
	
	
	<h3>TimePicker allows time</h3>
	<input type="text" id="datetimepicker5"/><br><br>
	
	
	<h3>Destroy DateTimePicker</h3>
	<input type="text" id="datetimepicker6"/><input id="destroy" type="button" value="destroy"/>
	
	
	<h3>Set options runtime DateTimePicker</h3>
	<input type="text" id="datetimepicker7"/>
	<p>If select day is Saturday, the minimum set 11:00, otherwise 8:00</p>
	
	
	<h3>onGenerate</h3>
	<input type="text" id="datetimepicker8"/>
	
	
	<h3>disable all weekend</h3>
	<input type="text" id="datetimepicker9"/>
	
	<h3>scroll</h3>
	<input type="text" id="datetimepicker10"/>
	
</div>	


<script src="../jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="jquery.datetimepicker.js"></script>
<script type="text/javascript">
$('#datetimepicker_mask').datetimepicker({
	mask:'9999/19/39 29:59'
});
$('#datetimepicker').datetimepicker();
$('#datetimepicker').datetimepicker({value:'2015/04/15 05:03',step:10});
$('#datetimepicker1').datetimepicker({
	datepicker:false,
	format:'H:i',
	step:5
});


	
	
$('#datetimepicker2').datetimepicker({
	yearOffset:222,
	lang:'ch',
	timepicker:false,
	format:'d/m/Y',
	formatDate:'Y/m/d',
	minDate:'-1970/01/02', // yesterday is minimum date
	maxDate:'+1970/01/02' // and tommorow is maximum date calendar
});
$('#datetimepicker3').datetimepicker({
	inline:true
});

$('#datetimepicker4').datetimepicker();

$('#open').click(function(){
	$('#datetimepicker4').datetimepicker('show');
});
$('#close').click(function(){
	$('#datetimepicker4').datetimepicker('hide');
});
$('#reset').click(function(){
	$('#datetimepicker4').datetimepicker('reset');
});
$('#datetimepicker5').datetimepicker({
	datepicker:false,
	allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00']
});
$('#datetimepicker6').datetimepicker();
$('#destroy').click(function(){
	if( $('#datetimepicker6').data('xdsoft_datetimepicker') ){
		$('#datetimepicker6').datetimepicker('destroy');
		this.value = 'create';
	}else{
		$('#datetimepicker6').datetimepicker();
		this.value = 'destroy';
	}
});
var logic = function( currentDateTime ){
	if( currentDateTime.getDay()==6 ){
		this.setOptions({
			minTime:'11:00'
		});
	}else
		this.setOptions({
			minTime:'8:00'
		});
};
$('#datetimepicker7').datetimepicker({
	onChangeDateTime:logic,
	onShow:logic
});
$('#datetimepicker8').datetimepicker({
	onGenerate:function( ct ){
		$(this).find('.xdsoft_date')
			.toggleClass('xdsoft_disabled');
	},
	minDate:'-1970/01/2',
	maxDate:'+1970/01/2',
	timepicker:false
});
$('#datetimepicker9').datetimepicker({
	onGenerate:function( ct ){
		$(this).find('.xdsoft_date.xdsoft_weekend')
			.addClass('xdsoft_disabled');
	},
	weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
	timepicker:false
});


$('#datetimepicker10').datetimepicker({
	scrollMonth:false,
	scrollTime:false,
	scrollInput:false
});
	
	
</script>

</body>
</html>
